<div class="modal-header">
  <div class="modal-title">{{ record.id ? '编辑' : '新增' }}</div>
</div>
<nz-spin *ngIf="!i" class="modal-spin"></nz-spin>
<form nz-form #sf="ngForm" se-container gutter="32">
  <nz-card [nzBordered]="false" nzTitle="列表定义">
    <se>
      <input
        type="text"
        nz-input
        [(ngModel)]="i.code"
        name="code"
        required
        pattern="^[a-z0-9]*$"
        placeholder="必填项，且只能包含a-z, 0-9之间"
      />
    </se>
    <se>
      <input type="text" nz-input [(ngModel)]="i.name" name="name" required placeholder="必填项" />
    </se>
  </nz-card>
  <nz-card [nzBordered]="false" nzTitle="操作定义" [nzExtra]="listFieldExtraTemplate">
    <nz-table formArrayName="items" [nzScroll]="{ y: '240px', x: '1300px' }" [nzShowPagination]="false" [nzData]="i.fields">
      <thead>
        <tr>
          <th
            nzLeft
            [nzChecked]="checked"
            [nzIndeterminate]="indeterminate"
            (nzCheckedChange)="onAllChecked($event)"
            [nzWidth]="'50px'"
          ></th>
          <th nzLeft [nzWidth]="'150px'">代码</th>
          <th nzLeft [nzWidth]="'150px'">名称</th>
          <th [nzWidth]="'100px'">类型</th>
          <th [nzWidth]="'100px'">单击事件</th>
          <th [nzWidth]="'100px'">权限值</th>
          <th [nzWidth]="'100px'">国际化代码</th>
        </tr>
      </thead>
      <tbody *ngIf="i.fields" cdkDropList>
        <tr *ngFor="let item of i.fields; let i = index" [formGroupName]="i" cdkDrag>
          <td [nzChecked]="setOfCheckedId.has(item.id!)" (nzCheckedChange)="onItemChecked(item.id!, $event)"></td>
          <td>
            <se hideLabel="true">
              <input nz-input formControlName="code" [(ngModel)]="item.code" placeholder="请输入条件代码" />
            </se>
          </td>
          <td>
            <se hideLabel="true">
              <input nz-input name="name" [(ngModel)]="item.name" placeholder="请输入条件名称" />
            </se>
          </td>
          <td>
            <se hideLabel="true">
              <nz-select name="type" [(ngModel)]="item.type" [nzPlaceHolder]="'请选择类型'" [nzShowSearch]="true">
                <nz-option *ngFor="let i of actionTyps" [nzLabel]="i.value!" [nzValue]="i.key"></nz-option>
              </nz-select>
            </se>
          </td>
          <td>
            <se hideLabel="true">
              <input nz-input name="click" [(ngModel)]="item.click" placeholder="请输入条件名称" />
            </se>
          </td>
          <td>
            <se hideLabel="true">
              <input nz-input name="acl" [(ngModel)]="item.acl" placeholder="请输入条件名称" />
            </se>
          </td>
          <td>
            <se hideLabel="true">
              <input nz-input formControlName="i18n" [(ngModel)]="item.i18n" placeholder="请输入国际化代码" />
            </se>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </nz-card>
  <ng-template #listFieldExtraTemplate>
    <nz-button-group>
      <button nz-button (click)="addLine()">添加行</button>
      <button nz-button (click)="deleteLine()">删除行</button>
    </nz-button-group>
  </ng-template>
  <div class="modal-footer">
    <button nz-button type="button" (click)="close()">关闭</button>
    <button nz-button type="submit" nzType="primary" (click)="save(sf.value)" [disabled]="!sf.valid" [nzLoading]="http.loading">
      保存
    </button>
    <button nz-button type="submit" nzType="primary" (click)="saveAs(sf.value)" [disabled]="!sf.valid" [nzLoading]="http.loading">
      另保存
    </button>
  </div>
</form>
